<template>
  <view class="readmore">
    <view class="readmore-text" :class="isOpen ? '': 'ellipsis'"  :style="'-webkit-line-clamp:'+props.line">
      <text @click="handleOpen" class="readmore-text-open" :style="props.style">
        <text v-if="!isOpen && props.content">展开</text>
        <text v-if="isOpen && props.content">收起</text></text>
      <text class="readmore-text-content">{{props.content}}</text>
    </view>
  </view>
</template>
<script setup>
import {ref} from 'vue'
const isOpen = ref(false);
const props = defineProps({
  content:{
    type:String,
    default:'',
    required:''
  },
  line:{
    type:Number,
    default:2
  },
  style:{
    type:Object,
    default: {
      color:'#9DF3FF'
    }
  }
})

const handleOpen = ()=>{
  isOpen.value = !isOpen.value;
}
</script>

<style lang="scss" scoped>

.readmore{
  display: flex;
  .ellipsis{
    display:-webkit-box;
    //flex-direction: column;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  &-text{
    text-indent:58rpx;
    &-open{
      text-indent:0;
      float:right;
      clear: both;
    }
    &-close{

    }
    &:before{
      content:'';
      width:'0rpx';
      height: calc(100% - 49rpx);
      float:right;
    }
    &-content{line-height:2;}
  }

}

</style>
